<template>
  <div v-show="visible" class="showPay">
    <!--  <div v-show="visible" @click="closeClick" class="showPay">-->
    <!--    <img style="width: 400px;" class="img" :src="'http://127.0.0.1:8001/'+url" alt="图片加载失败" />-->
    <div class="pay-content">
      <div class="text-center pay-item">应付金额：</div>
      <div class="text-center pay-item">{{ (orderData.orderMoney / 100) }}</div>
      <div class="text-center pay-item">商品数量：</div>
      <div class="text-center pay-item">{{ orderData.totalCount }}</div>
      <div class="text-center pay-item">收款金额：</div>
      <input class="text-center pay-item" v-model.number='paidMoney' placeholder="0"/>
      <div class="text-center pay-item-receive" @click="addCashMoney(100)">+100</div>
      <div class="text-center pay-item-receive" @click="addCashMoney(50)">+50</div>

      <input class="text-center-third pay-item-receive" :class="thirdPayType=='ali'?'return-money-pass':''"
             @change="thirdPaidMoneyPart('ali')" placeholder="支付宝"
             v-model.number='aliPaidMoney'/>
      <input class="text-center-third pay-item-receive" :class="thirdPayType=='wx'?'return-money-pass':''"
             @change="thirdPaidMoneyPart( 'wx' )" placeholder="微信"
             v-model.number='wxPaidMoney'/>
      <div class="text-center pay-item-receive" @click="addCashMoney(20)">+20</div>
      <div class="text-center pay-item-receive" @click="addCashMoney(10)">+10</div>

      <div class="text-center-third pay-item-receive" :class="thirdPayType=='ali'&&fullPay?'return-money-pass':''"
           @click="thirdPaidMoneyFull('ali')">支付宝全额
      </div>
      <div class="text-center-third pay-item-receive" :class="thirdPayType=='wx'&&fullPay?'return-money-pass':''"
           @click="thirdPaidMoneyFull( 'wx' )">微信全额
      </div>

      <div class="text-center pay-item-receive" @click="addCashMoney(5)">+5</div>
      <div class="text-center pay-item-receive" @click="addCashMoney(1)">+1</div>
      <div class="text-center pay-item-receive-reset" @click="resetPaidMoney()">重置</div>
      <div class="text-center pay-item">找款金额：</div>
      <div class="text-center pay-item " :class="returnMoney<0?'return-money-warning':'return-money-pass'">
        {{ returnMoney }}
      </div>
      <div class="text-center pay-item" @click="cancel">取消</div>
      <div class="text-center pay-item" @click="payOrder">确认</div>
    </div>
  </div>
</template>

<script>
import {mapActions} from "vuex";

export default {
  props: {
    orderData: {
      type: Object,
      default: () => {
      }
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    getData() {
      return this.orderData.orderGoodses.map(item => {
        return {
          'goodsInDTO': {
            'id': item.id,
            'goodsBarcode': item.goodsBarcode,
            'goodsQrcode': item.goodsQrcode,
            'goodsName': item.goodsName,
            'goodsImgUrls': item.goodsImgUrls,
            'goodsSellingPriceCustom': item.goodsSellingPriceCustom,
          },
          'goodsCount': item.goodsCount,
          'goodsBalancePrice': item.goodsBalancePrice,
          'goodsBalancePriceAll': item.goodsBalancePriceAll
        }
      })
    },
    closeClick() {
      //子组件可以使用 $emit 触发父组件的自定义事件
      this.$emit("closeClick");
    },
    paySuccess() {
      //子组件可以使用 $emit 触发父组件的自定义事件
      this.resetPaidMoney();
      this.$emit("paySuccess");
      this.closeClick();
    },
    addCashMoney(paidMoney) {
      if (this.fullPay) {
        let msg;
        let thirdPayType = this.thirdPayType;
        if (thirdPayType == 'ali') {
          msg = '支付宝已全额支付,请重置后操作！！！'
        } else if (thirdPayType == 'wx') {
          msg = '微信已全额支付,请重置后操作！！！'
        }
        if (msg) {
          this.$warningMessage(msg)
        }
        return;
      }
      this.paidMoney += paidMoney;
      this.cashMoney += paidMoney;
    },
    thirdPaidMoneyPart(type) {
      let thirdPayType = this.thirdPayType;
      if (thirdPayType != null) {
        let msg;
        if (thirdPayType == 'ali') {
          msg = '已用支付宝支付,请重置后操作！！！';
          this.wxPaidMoney = null;
        } else {
          msg = '已用微信支付,请重置后操作！！！';
          this.aliPaidMoney = null;
        }
        this.$warningMessage(msg)
        return;
      }
      if (this.fullPay) {
        let msg;
        if (thirdPayType == 'ali') {
          msg = '支付宝已全额支付,请重置后操作！！！'
          this.aliPaidMoney = null;
        } else if (thirdPayType == 'wx') {
          msg = '微信已全额支付,请重置后操作！！！'
          this.wxPaidMoney = null;
        }
        if (msg) {
          this.$warningMessage(msg)
        }
        return;
      }
      this.thirdPayType = type
      if (this.thirdPayType == 'ali') {
        this.paidMoney += this.aliPaidMoney;
      } else if (this.thirdPayType == 'wx') {
        this.paidMoney += this.wxPaidMoney;
      }
    },
    thirdPaidMoneyFull(type) {
      if (this.paidMoney != null) {
        this.$warningMessage('请重置后再全额支付！！！')
        return
      }
      this.thirdPayType = type
      this.fullPay = true;
      this.paidMoney = Number((this.orderData.orderMoney / 100));
    },
    resetPaidMoney() {
      this.thirdPayType = null
      this.fullPay = false
      this.paidMoney = null;
      this.cashMoney = null;
      this.aliPaidMoney = null;
      this.fullPay = false;
      this.wxPaidMoney = null;
    },
    payOrder() {
      if (this.returnMoney < 0) {
        let res = confirm('未足额支付，是否完成订单？');
        if (res == true) {
          this._payOrder()
          this.paySuccess()
        }
      } else {
        this._payOrder()
        this.paySuccess()
      }
    },
    cancel() {
      this.resetPaidMoney();
      this.closeClick();
    },
    _payOrder() {
      const url = '/sellingOrder/pay'
      let payType;
      if (this.thirdPayType == null) {
        payType = 'CASH'
      } else {
        if (this.thirdPayType == 'ali') {
          if (this.fullPay) {
            payType = 'ALI';
          } else {
            payType = 'ALI_CASH';
          }
        } else if (this.thirdPayType == 'wx') {
          if (this.fullPay) {
            payType = 'WX'
          } else {
            payType = 'WX_CASH';
          }
        }
      }
      const res = this.POST_DATA({
        dataUrl: url,
        sellingOrderGoodsList: this.orderData.sellingOrderGoodsList,
        orderMoney: this.orderData.orderMoney,
        returnMoney: this.returnMoney * 100,
        paidMoney: this.paidMoney * 100,
        cashMoney: this.cashMoney * 100,
        payType: payType,
        orderNo: this.orderData.orderNo
      });
      if (res) {
        this.$nextTick(() => {
          this.$successMessage('支付成功')
        })
      }
    },
    ...mapActions({
      POST_DATA: '_POST_DATA'
    })
  },
  data() {
    return {
      thirdPayType: null,
      paidMoney: null,
      cashMoney: null,
      aliPaidMoney: null,
      wxPaidMoney: null,
    }
  },
  computed: {
    returnMoney() {
      if (!this.paidMoney) {
        return 0;
      } else {
        let s = (this.paidMoney - (this.orderData.orderMoney) / 100);
        return s;
      }
    },
  }
};
</script>
<style lang="css" scoped>
.showPay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  /*display: flex;*/
  align-items: center;
  justify-content: center;
}

.pay-content {
  width: 40vw;
  height: 80vh;
  margin: 10vh 30vw;
  float: left;
  background: white;
}

.pay-item {
  display: block;
  width: 20vw;
  text-align: center;
  height: 10vh;
  border: 1px solid #0f6152;
  float: left;
  font-size: 2vw;
  font-weight: 600;
}

.pay-item-receive {
  display: block;
  width: 10vw;
  text-align: center;
  height: 10vh;
  border: 1px solid #0f6152;
  float: left;
  background: aquamarine;
}

.pay-item-receive-reset {
  display: block;
  width: 20vw;
  text-align: center;
  height: 10vh;
  border: 1px solid #0f6152;
  float: left;
  font-size: 2vw;
  font-weight: 600;
  background: #ffe585;
}

.return-money-warning {
  color: red;
}

.return-money-pass {
  color: green;
}

.text-center {
  text-align: center;
  line-height: 10vh;
  font-size: 2vw;
  font-weight: 600;
}

.text-center-third {
  text-align: center;
  line-height: 10vh;
  font-size: 22px;
  font-weight: 600;
}
</style>
